<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飞到半空中</title>
</head>
<body>
<script>
    // async await 回调地狱
    //
    // 1. 回调地狱   简单说，就是函数作为参数层层嵌套
    // 在使用JavaScript时，为了实现某些逻辑经常会写出层层嵌套的回调函数，
    // 如果嵌套过多，会极大影响代码可读性和逻辑，这种情况也被成为回调地狱
    // 解决1 拆解 function  将各步拆解为单个的 function
    // 解决2 通过 Promise 链式调用的方式
    // 解决4  async / await


    // function buildCatList(list, returnVal, fn) {
    //     setTimeout(function (name) {
    //         var catList = list === '' ? name : list + ',' + name
    //         fn(catList)
    //     }, 200, returnVal)
    // }
    //
    // buildCatList('', 'Panther', getJanguar)
    //
    // function getJanguar(list) {
    //     buildCatList(list, 'Janguar', getLynx)
    // }
    //
    // function getLynx(list) {
    //     buildCatList(list, 'Lion', print)
    // }
    //
    // function print(list) {
    //     console.log(list)
    // }

    // function buildCatList(list, returnVal) {
    //     return new Promise(function (resolve, reject) {
    //         setTimeout(function (name) {
    //             var catList = list === '' ? name : list + ',' + name
    //             resolve(catList)
    //         }, 200, returnVal)
    //     })
    // }

    // buildCatList('', 'Panther').then(function (res) {
    //     return buildCatList(res, 'Janguar')
    // }).then(function (res) {
    //     return buildCatList(res, 'Lion')
    // }).then(function (res) {
    //     console.log(res)
    // })

    // 解决4  async / await
    // function buildCatList(list, returnVal) {
    //     return new Promise(function (resolve, reject) {
    //         setTimeout(function (name) {
    //             var catList = list === '' ? name : list + ',' + name
    //             resolve(catList)
    //         }, 200, returnVal)
    //     })
    // }
    // function fn(list) {
    //     return list + ',' + 555
    // }
    // async function render() {
    //     var a = await buildCatList('','Panther')
    //     var b = await buildCatList(a, 'Jaguar')
    //     var c = await buildCatList(b, 'Lion')
    //     var d = await fn(c)
    //     console.log(d)  // Panther,Jaguar,Lion,555
    // }
    // render()

    // function hell(arg) {
    //     return new Promise((resolve, reject) => {
    //         setTimeout(()=>{
    //             var val
    //             if(!arg)  val = '1'
    //             else val = arg
    //             resolve(arg + 1)
    //         },1000)
    //     })
    // }
    // function fn(arg) {
    //     return arg + ',' + 'end'
    // }
    // async function render() {
    //     var a = await hell('2')
    //     var b = await hell(a)
    //     var c = await hell(b)
    //     var d = await fn(c)
    //     console.log(d)
    // }
    // render()

</script>
</body>
</html>